


        
        main .recruit .list .r{
            -webkit-tap-highlight-color:transparent;
        }


        main .headTip{
            padding-top: 72px;
            padding-bottom: 108px;
        }
        main .headTip .box{
            margin-left: -72px;
        }
        main .headTip .box>*{
            width: 50%;
            padding-left: 72px;
        }

        main .tips{
            padding-left: 0px !important;
            margin-bottom: 180px;
        }
        main .tips .contn{
            flex-direction: row-reverse;
            margin-left: -108px;
            flex-wrap: wrap;
            align-items: flex-start;
        }
        main .tips .contn .block{
            width: calc(100% / 3);
            padding-left: 108px;
        }
        main .tips .contn .block .box{
            margin-bottom: 108px;
        }
        main .tips .contn .block:nth-child(2){
            margin-top: 72px;
        }
        main .tips .contn .block:nth-child(3){
            margin-top: 144px;
        }
        
        main .tips .contn .block .box .pra p{
            color: #969696;
        }
        main .tips .contn .block:last-child .box{
            position: relative;
            margin-bottom: 0px;
        }
        main .tips .contn .block:last-child .box>*:first-child{
            margin-bottom: 100%;
        }
        main .tips .contn .block:last-child .box>*:last-child{
            position: absolute;
            top: 100%;
            left: 100%;
            width: 100%;
        }

        main .recruit{
            color: #010101;
            padding-bottom: 360px;
        }
        main .recruit .ttl{
            margin-bottom: 72px;
        }
        main .recruit .ttl>*{
            width: 50%;
        }
        main .recruit .list .r{
            padding: 90px 100px;
            position: relative;
            margin-bottom: 48px;
            background: #f6f6f6;
            cursor: pointer;
        }
        main .recruit .list .r:last-child{
            margin-bottom: 0px;
        }
        main .recruit .list .r::before,
        main .recruit .list .r::after{
            content: '';
            position: absolute;
            top: 48px;
            right: 36px;
            width: 24px;
            height: 2px;
            background: #010101;
        }

        main .recruit .list .r::after{
            transform: rotate(90deg) scaleX(1);
            transition: transform .5s cubic-bezier(.365,.305,0,1);
        }
        main .recruit .list .r.clicked::after{
            transform: rotate(90deg) scaleX(0);
        }
        main .recruit .list .r h3{
            margin-bottom: 0px;
        }
        main .recruit .list .r .pay{
            font-size: 21px;
            opacity: .7;
        }
        main .recruit .list .r .box{
            overflow: hidden;
            height: 0px;
            transition: height linear .3s;
        }
        main .recruit .list .r .box p{
            padding-top: 45px;
            transform: translateY(40px);
            transition: transform linear .3s 10ms;
        }
        main .recruit .list .r.clicked .box p{
            transform: translateY(0px);
            transition-delay: 0s;
        }
        

        @media(max-width:1600px){
            main .headTip{
                padding-top: 60px;
                padding-bottom: 90px;
            }
            main .headTip .box{
                margin-left: -60px;
            }
            main .headTip .box>*{
                padding-left: 60px;
            }

            main .tips{
                margin-bottom: 150px;
            }
            main .tips .contn{
                margin-left: -90px;
            }
            main .tips .contn .block{
                padding-left: 90px;
            }
            main .tips .contn .block .box{
                margin-bottom: 90px;
            }
            main .tips .contn .block:nth-child(2){
                margin-top: 60px;
            }
            main .tips .contn .block:nth-child(3){
                margin-top: 120px;
            }

            main .recruit{
                padding-bottom: 300px;
            }
            main .recruit .ttl{
                margin-bottom: 60px;
            }
            main .recruit .list .r{
                margin-bottom: 40px;
                padding: 55px 70px;
            }
            main .recruit .list .r::before,
            main .recruit .list .r::after{
                width: 20px;
                top:40px;
                right: 30px;
            }
            main .recruit .list .r .pay{
                font-size: 18px;
            }
            main .recruit .list .r .box p{
                padding-top: 35px;
            }
        }

        @media(max-width:1200px){
            main .headTip{
                padding-top: 56px;
                padding-bottom: 84px;
            }
            main .headTip .box{
                margin-left: -56px;
            }
            main .headTip .box>*{
                padding-left: 56px;
            }

            main .tips{
                margin-bottom: 140px;
            }
            main .tips .contn{
                margin-left: -56px;
            }
            main .tips .contn .block{
                padding-left: 56px;
            }
            main .tips .contn .block .box{
                margin-bottom: 84px;
            }
            main .tips .contn .block:nth-child(2){
                margin-top: 56px;
            }
            main .tips .contn .block:nth-child(3){
                margin-top: 112px;
            }

            main .recruit{
                padding-bottom: 280px;
            }
            main .recruit .ttl{
                margin-bottom: 56px;
            }
            main .recruit .list .r{
                margin-bottom: 37px;
                padding: 50px 65px;
            }
            main .recruit .list .r::before,
            main .recruit .list .r::after{
                width: 18px;
                top: 37px;
                right: 28px;
            }
            main .recruit .list .r .pay{
                font-size: 16px;
            }
            main .recruit .list .r .box p{
                padding-top: 30px;
            }
        }

        @media(max-width:1024px){
            main .headTip{
                padding-top: 52px;
                padding-bottom: 78px;
            }
            main .headTip .box{
                margin-left: -52px;
            }
            main .headTip .box>*{
                padding-left: 52px;
            }

            main .tips{
                margin-bottom: 104px;
            }
            main .tips .contn{
                flex-direction: row;
                margin-left: 0px;
            }
            main .tips .contn .block{
                padding-left: 55px;
                width: 50%;
            }
            main .tips .contn .block .box{
                margin-bottom: 78px;
            }
            main .tips .contn .block:nth-child(2){
                margin-top: 0px;
            }
            main .tips .contn .block:nth-child(3){
                width: 100%;
                margin-top: 0px;
            }
            main .tips .contn .block:nth-child(3) .box{
                overflow: hidden;
            }
            main .tips .contn .block:nth-child(3) .box>*{
                width: calc(50% - 27.5px) !important;
                float: left;
            }
            main .tips .contn .block:nth-child(3) .box>*:first-child{
                margin-bottom: 0px;
            }
            main .tips .contn .block:nth-child(3) .box>*:last-child{
                float: right;
                position: initial;
            }
            

            main .recruit{
                padding-bottom: 200px;
            }
            main .recruit .ttl{
                margin-bottom: 52px;
            }
            main .recruit .list .r{
                margin-bottom: 17px;
                padding: 20px 30px;
            }
            main .recruit .list .r::before,
            main .recruit .list .r::after{
                width: 17px;
                top: 21px;
                right: 13px;
            }
            main .recruit .list .r .pay{
                font-size: 16px;
            }
            main .recruit .list .r .box p{
                padding-top: 25px;
            }
        }

        @media(max-width:767px){
            .gap.lg{
                padding-left: 25px;
                padding-right: 25px;
            }
            main .headTip{
                padding-top: 48px;
                padding-bottom: 72px;
            }
            main .headTip .box{
                margin-left: -48px;
            }
            main .headTip .box>*{
                padding-left: 48px;
            }

            main .tips{
                margin-bottom: 96px;
            }
            main .tips .contn{
                flex-direction: row;
            }
            main .tips .contn .block{
                padding-left: 25px;
                width: 100%;
            }
            main .tips .contn .block .box{
                margin-bottom: 72px;
            }
            main .tips .contn .block:nth-child(3) .box>*{
                width: 100% !important;
                float: initial;
            }
            main .tips .contn .block:nth-child(3) .box>*:first-child{
                margin-bottom: 32px;
            }
        
            main .recruit{
                padding-bottom: 120px;
            }
            main .headTip .box,
            main .recruit .ttl{
                display: block;
            }
            main .headTip .box>*,
            main .recruit .ttl>*{
                width: 100%;
            }
            main .recruit .list .r{
                padding: 15px 20px;
                margin-bottom: 15px;
            }
            main .recruit .list .r::before,
            main .recruit .list .r::after{
                width: 15px;
                top: 20px;
                right: 12px;
            }
            main .recruit .list .r .pay{
                font-size: 14px;
            }
        }